* {margin: 0; padding: 0; box-sizing: border-box;}

@font-face {font-family: '思源黑体';  src: url("../font/SourceHanSansCN-Regular.otf");}
@font-face {font-family: 'Hero New';  src: url("../font/Hero New Regular.otf"); unicode-range: U+30-39, U+61-7a, U+41-5a, U+002D;}

body {touch-action: none; overflow-x: hidden; font-family: 'Hero New','思源黑体';}
html {font-size: calc(100vw/10.8);}
img {display: block;}

.flex {display: -webkit-flex; display: flex;}
.center {text-align: center; justify-content: center;}

.pop-bg {position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background-color: rgba(0,0,0,.55); justify-content: center; align-items: center; display: none;}
.pop-bg.show {display: -webkit-flex; display: flex;}
.pop-bg .pop-box {position: relative; width: 9.46rem; height: 13.26rem; background-image: url("../images/pop_box_bg.png"); background-size: 100%; background-repeat: no-repeat; display: none;}
.pop-bg .pop-box#rule {padding: 1.6rem 1.42rem 0 1.28rem;}
.pop-bg .pop-box#tips {padding-top: 1.4rem;}
.pop-bg .pop-box.game-pop {width: 8.38rem; height: 6.21rem; background-image: url("../images/pop_game_over_bg.png"); background-size: 100%; background-repeat: no-repeat; padding-top: 2.2rem;}
.pop-bg .pop-box.game-pop#failed {padding-top: 2rem;}
.pop-bg .pop-box.game-pop.success {background-image: url("../images/pop_game_over_bg1.png"); background-size: 100%; background-repeat: no-repeat; padding-top: 2.17rem;}
.pop-bg .pop-box.game-pop.success > p {font-size: .56rem; line-height: .8rem;}
.pop-bg .pop-box.game-pop.success > .pop-btns-box {justify-content: space-between; width: 6rem; margin: .85rem auto 0;}
.pop-bg .pop-box.game-pop.success > .pop-btns-box > img {width: 2.23rem;}
.pop-bg .pop-box.game-pop.success > .pop-btns-box.failed {width: 7rem;}
.pop-bg .pop-box.game-pop.success > .pop-btns-box.failed > img {width: 3.07rem;}
.pop-bg .pop-box.game-pop > p {font-size: .45rem; line-height: .62rem; text-align: center; font-weight: bold;}
.pop-bg .pop-box.game-pop > p > b {color: #fd6681; margin-left: .1rem;}
.pop-bg .pop-box.game-timer {width: 2rem; height: 2.95rem; background-image: url("../images/game_timer_num.png"); background-size: 6rem; background-position-y: top; background-repeat: no-repeat;}
.pop-bg .pop-box.game-timer.three {background-position-x: right;}
.pop-bg .pop-box.game-timer.two {background-position-x: -2rem;}
.pop-bg .pop-box.game-timer.one {background-position-x: left;}
.pop-bg .pop-box .pop-box-content {overflow: auto; height: 9.35rem;}
.pop-bg .pop-box .pop-box-content > p {font-size: .33rem; line-height: .52rem; text-align: justify;}
.pop-bg .pop-box .pop-confirm-btn {width: 2.96rem; height: .75rem; background-image: url("../images/confirm_btn.png"); background-size: 100%; background-repeat: no-repeat; margin: .2rem auto 0;}
.pop-bg .pop-box#rank {padding-top: 1.13rem; position: absolute; z-index: 9;}
.pop-bg .pop-box .rank-close {position: absolute; width: .75rem; height: .75rem; left: 50%; bottom: -1.15rem; -webkit-transform: translate(-50%,0); transform: translate(-50%,0);}
.pop-bg .pop-box .pop-close {position: absolute; width: .96rem; height: 1rem; background-image: url("../images/pop_close_icon.png"); background-size: 100%; background-repeat: no-repeat; left: 1.24rem; top: 1.08rem;}
.pop-bg .pop-box .rank-title {width: 2.17rem; margin: 0 auto;}
.pop-bg .pop-box .pop-rank-box {margin: 0 auto; width: 7.25rem; height: 7.2rem; overflow: auto;}
.pop-bg .pop-box .pop-rank-item-head {margin: .67rem auto .5rem; width: 7.25rem; justify-content: space-between;}
.pop-bg .pop-box .pop-rank-item-head .pop-rank-item {font-size: .4rem; font-weight: bold; text-align: center; white-space: nowrap;}
.pop-bg .pop-box .pop-rank-item-head .pop-rank-item:nth-child(1) {width: .86rem;}
.pop-bg .pop-box .pop-rank-item-head .pop-rank-item:nth-child(2) {width: 1.75rem;}
.pop-bg .pop-box .pop-rank-item-head .pop-rank-item:nth-child(3) {width: 2rem;}
.pop-bg .pop-box .pop-rank-item-head .pop-rank-item:nth-child(4) {width: 2rem;}
.pop-bg .pop-box .pop-rank-box .pop-rank-item-box {justify-content: space-between; align-items: center; margin-bottom: .28rem;}
.pop-bg .pop-box .pop-rank-box .pop-rank-item-box .pop-rank-item {font-size: .4rem; text-align: center;}
.pop-bg .pop-box .pop-rank-box .pop-rank-item-box .pop-rank-item > img {width: .75rem; height: .75rem; margin: 0 auto; border-radius: 50%; overflow: hidden;}
.pop-bg .pop-box .pop-rank-box .pop-rank-item-box .pop-rank-item:nth-child(1) {width: .86rem;}
.pop-bg .pop-box .pop-rank-box .pop-rank-item-box .pop-rank-item:nth-child(2) {width: 1.75rem;}
.pop-bg .pop-box .pop-rank-box .pop-rank-item-box .pop-rank-item:nth-child(3) {width: 2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.pop-bg .pop-box .pop-rank-box .pop-rank-item-box .pop-rank-item:nth-child(4) {width: 2rem;}

.page {height: 100vh; position: relative;}
.page.index {background-image: url("../images/index_bg.jpg"); background-size: 100%; background-position: center bottom; background-repeat: no-repeat; padding-top: 1.63rem;}
.page .logo {position: absolute; width: 3.35rem; top: .37rem; right: .36rem;}
.page .slogan {width: 7.69rem; margin: 0 auto;}
.page .rank-btn {position: absolute; width: .86rem; height: 2.19rem; background-image: url("../images/rank_btn.png"); background-size: 100%; background-repeat: no-repeat; top: 1.28rem;}
.page .index-game-btn {position: absolute; width: 8.23rem; height: 1.36rem; background-image: url("../images/index_game_btn.png"); background-size: 100%; background-repeat: no-repeat; bottom: 2.89rem; left: 50%; margin-left: -4.11rem;}
.page .index-notice {position: absolute; bottom: 2.2rem; z-index: 9; justify-content: center; width: 100%;}
.page .index-notice > input[type="checkbox"] {display: none;}
.page .index-notice > input[type="checkbox"]+label {display: block; margin-right: .11rem; width: .35rem; height: .35rem; background-image: url("../images/checkbox_icon.png"); background-size: 100%; background-repeat: no-repeat;}
.page .index-notice > input[type="checkbox"]:checked+label {background-image: url("../images/checkbox_icon_on.png"); background-size: 100%; background-repeat: no-repeat;}
.page .index-notice > p {font-size: .3rem; color: #949494;}
.page .index-bottom {position: absolute; width: 100%; height: 2rem; align-items: center; padding-right: .54rem; justify-content: flex-end; bottom: 0; left: 0; background-color: #fff;}
.page .index-bottom > img {width: 1.88rem;}

.page.game {background-image: url("../images/game_bg.jpg"); background-size: cover; background-repeat: no-repeat; display: none;}
.page .game-bg-yn {position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background-image: url("../images/game_bg_yn.jpg"); background-size: cover; background-repeat: no-repeat; display: none;}
.page .timer-box {position: absolute; width: 2.89rem; height: 1.13rem; background-image: url("../images/timer_box.png"); background-size: 100%; background-repeat: no-repeat; left: 0; top: .34rem; line-height: 1.2rem; color: #005eb8; font-size: .48rem; text-align: center; padding-right: 1rem; font-weight: bold; z-index: 1;}
.page .country-label {position: absolute; width: 1.29rem; height: 3.51rem; top: .64rem; right: 1.4rem; display: none;}
.page .country-label.china {background-image: url("../images/game_country_label_china.png"); background-size: 100%; background-repeat: no-repeat;}
.page .country-label.ml {background-image: url("../images/game_country_label_ml.png"); background-size: 100%; background-repeat: no-repeat;}
.page .country-label.tai {background-image: url("../images/game_country_label_tai.png"); background-size: 100%; background-repeat: no-repeat;}
.page .country-label.xjp {background-image: url("../images/game_country_label_xjp.png"); background-size: 100%; background-repeat: no-repeat;}
.page .country-label.yin {background-image: url("../images/game_country_label_yin.png"); background-size: 100%; background-repeat: no-repeat;}
.page .country-label.yn {background-image: url("../images/game_country_label_yn.png"); background-size: 100%; background-repeat: no-repeat;}
.page .boat {position: absolute; width: 6.53rem; height: 7.25rem; background-image: url("../images/boat.gif"); background-size: 100%; background-repeat: no-repeat; left: 50%; bottom: .2rem; margin-left: -3.26rem; -webkit-transform-origin: center center; transform-origin: center center; z-index: 9;}
.page .boat.slow-type {background-image: url("../images/boat_slow.gif"); background-size: 100%; background-repeat: no-repeat;}
.page .boat.fast-type {background-image: url("../images/boat_fast.gif"); background-size: 100%; background-repeat: no-repeat;}
.page .boat.fast-type:before {content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: url("../images/boat_buff.png"); background-size: 100%; background-repeat: no-repeat;}
.page .boat.wait {background-image: url("../images/boat.png"); background-size: 100%; background-repeat: no-repeat; display: none;}
.page .boat .boat-hit-box {position: absolute; width: .87rem; height: 3.02rem; left: 2.8rem; top: 2.46rem;}
.page .game_move_mountain {position: absolute; top: 20%; opacity: 0; -webkit-animation: fadeIn .5s linear forwards; animation: fadeIn .5s linear forwards;  z-index: 1;}
.page .game_move_mountain.one {width: 3.82rem;}
.page .game_move_mountain.two {width: 4.62rem;}
.page .game_move_mountain.left {left: 5%;}
.page .game_move_mountain.right {right: 5%;}
.page .game_move_mountain.sh {width: 7.31rem; right: -10%; margin-top: -1.8rem;}
.page .game_move_mountain.yn {width: 10.28rem; margin-top: -1.4rem;}
.page .game_move_mountain.yn.left {left: -60%;}
.page .game_move_mountain.yn.right { right: -60%;}
.page .game_move_mountain.tai {width: 4.7rem; margin-top: -1.8rem;}
.page .game_move_mountain.ml {width: 7.02rem; right: 0; margin-top: -1.4rem;}
.page .game_move_mountain.xjp {width: 4.8rem; margin-top: -.4rem;}
.page .game_move_mountain.yin {width: 4.7rem; margin-top: -1rem;}
.page .finish {position: absolute; width: 8.6rem; margin-left: -4.3rem; left: 50%; top: 20%; -webkit-transform-origin: top center; transform-origin: top center; z-index: 8; -webkit-animation: fadeScaleIn .5s linear forwards; animation: fadeScaleIn .5s linear forwards; display: none;}
.page .game-success-flower {position: absolute; left: 0; bottom: 5rem; -webkit-transform-origin: bottom center; transform-origin: bottom center; z-index: 9; display: none;}
.page .game-item {position: absolute; top: 30%; left: 50%; -webkit-animation: fadeScaleIn .5s linear forwards; animation: fadeScaleIn .5s linear forwards;}
.page .game-item.bad {width: 1.08rem; margin-left: -.54rem;}
.page .game-item.good {width: 2.34rem; margin-left: -1.17rem;}
.page .ts-text-box {position: absolute; width: auto; white-space: nowrap; color: #005eb8; font-size: .4rem; font-weight: bolder; right: -100%; -webkit-animation: tsMove 6s linear forwards; animation: tsMove 6s linear forwards; top: 20%; padding: .1rem .3rem; border-radius: .5rem; background-color: #fff; border: 1px #005eb8 solid; z-index: 10;}
.page .game-start-cloud {position: absolute; width: 9.75rem; top: 5.2rem; right: 0; display: none;}

.page#res {display: none;}
.page .res-btns-box {padding: 0 .9rem; width: 100%; position: absolute; left: 0; bottom: 3.26rem; justify-content: space-between;}
.page .res-btns-box .button {width: 3.26rem; height: 1.13rem;}
.page .res-btns-box .button#poster {background-image: url("../images/make_poster_btn.png"); background-size: 100%; background-repeat: no-repeat;}
.page .res-btns-box .button#again {background-image: url("../images/play_again_btn.png"); background-size: 100%; background-repeat: no-repeat;}






